<template>
    <div>
        <!-- xzPlace! -->
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <el-row class="head-fun">
                        <el-col :span="24">
                            <div class="lf choose-title">行政管理</div>
                            <el-input v-model="zhanName" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">对外名称</div>
                            <el-input v-model="chargeMan" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">对内名称</div>
                            <el-input v-model="phone" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <button class="check-btn rf custom-btn" @click="getXzList"><img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询</button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="addWin=true;modTitle='添加'">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="addWin=true;modTitle='修改'">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="del">删除</div>
                        </el-col>
                    </el-row>
                    <!-- 表格数据 -->
                    <avue-crud :data="xzList[0].data" :option="xzList[0].option" @current-row-change="rowChange" :page="xzList[0].page" @current-change="xzPage"></avue-crud>
                    <!-- 弹窗 -->
                    <div class="modal-win" v-show="addWin">
                      <div class="closeWin" @click="addWin=false">X</div>
                      <!-- 标题栏 -->
                      <el-row class="add-title">
                          <el-col :span="24">
                              <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{modTitle}}</span>
                          </el-col>
                      </el-row>
                      <!-- 表单栏 -->
                      <el-row>
                        <el-col :span="24">
                          <avue-form v-model="xzForm" :option="addFormOption" class="yz-form"></avue-form>
                          <button class="check-btn rf" @click="addWin=false">
                          <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                          <button class="check-btn rf" @click="modTitle=='添加'? add():mod()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
                        </el-col>
                      </el-row>
                      
                    </div>
                </div>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData";
const DIC={
  pType:[
    {
      label:"国家",
      value:"country"
    },
    {
      label:"省、直辖市",
      value:"sheng"
    },
    {
      label:"地市",
      value:"di"
    },
    {
      label:"县、县级省、市辖区",
      value:"xianqu"
    },
    {
      label:"乡镇街道",
      value:"xiangjie"
    },
  ]
}
export default {
  data: function() {
    return {
      activeTag: "5-1",
      zhanName: "",
      chargeMan: "",
      phone: "",
      xzList: [
        {
          page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            page: true,
            highlightCurrentRow:true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      currentRow:"",
      pageSize: 1,
      pageNum: 1,
      totalPage: 0,
      addWin:false,
      modTitle:"test",
      xzForm:{},
      addFormOption:{
        dicData:DIC,
        column:[
          {
            label:"中心编码",
            prop:"centerNum",
            disabled:true,
            span:12
          },
          {
            label:"中心名称",
            prop:"centerName",
            disabled:true,
            span:12
          },
          {
            label:"站内编码",
            prop:"inNum",
            span:12
          },
          {
            label:"对内名称",
            prop:"inName",
            span:12
          },
          {
            label:"对外名称",
            prop:"outName",
            span:12
          },
          {
            label:"排序号",
            prop:"indxNum",
            span:12
          },
          {
            label:"行政区域",
            prop:"xzPlace",
            span:12
          },
          {
            label:"辖区类型",
            prop:"placeType",
            type:"select",
            dicData:"pType",
            span:12
          },
        ]
      }
    };
  },
  methods: {
    xzPage(val){
      this.xzList[0].page.currentPage=val;
      this.getXzList();
    },
    getXzList() {
      this
        .postRequest("/sch/data/region/list",{
          filterRules:JSON.stringify([
            {"field":"pid","op":"eq","value":this.zhanName},{"field":"name_in","op":"cn","value":this.chargeMan},{"field":"name_out","op":"cn","value":this.phone}
          ]),
          rows:10,
          page:this.xzList[0].page.currentPage
        })
        .then(data => {
          this.xzList[0].page.total=data.data.totalRow;
          this.xzList[0].data=data.data.list
        });
    },
    refresh() {
      this.getXzList();
    },
    handleCurrentChange(val) {
      this.$http
        .post(
          "/sch/data/line/list",
          qs.stringify({ page: val })
        )
        .then(data => {
          for (var item of data.data.list) {
            this.xzList.push({
              create_org: item.create_org,
              id: item.id,
              official_name: item.official_name,
              name_in: item.name_in,
              name_out: item.name_out,
              type: item.type,
              update_time: item.update_time
            });
          }
        });
    },
    tableCreate() {
      this.xzList[0].option.column.push(
         {
          label: "班次号",
          prop: "id",
        },
        {
          label: "统一编码",
          prop: "official_code"
        },
        {
          label: "站内编码",
          prop: "code"
        },
        {
          label: "统一名称",
          prop: "official_name"
        },
        {
          label: "对内名称",
          prop: "name_in"
        },
        {
          label: "辖区类型",
          prop: "type"
        },
        {
          label: "数据更新时间",
          prop: "update_time"
        },
        {
          label: "数据状态",
          props: "state",
        },
      );
    },
    add(){
      this.postRequest("/sch/data/region/add",{
        "region.official_code":this.xzForm.centerNum,
        "region.official_name":this.xzForm.centerName,
        "region.code":this.xzForm.inNum,
        "region.name_in":this.xzForm.inName,
        "region.name_out":this.xzForm.outName,
        "region.idx":this.xzForm.indxNum,
        "region.pid":this.xzForm.xzPlace,
        "region.type":this.xzForm.placeType
      }).then(data=>{
        if(data.data[0]==0){
          this.$message({
            message: data.data[1],
            type: 'success'
          });
        }else{
          this.$message.error(data.data[1]);
        }
      });
    },
    mod(){
      this.postRequest("/sch/data/region/update",{
        "region.id":this.val.id,
        "region.official_code":this.xzForm.centerNum,
        "region.official_name":this.xzForm.centerName,
        "region.code":this.xzForm.inNum,
        "region.name_in":this.xzForm.inName,
        "region.name_out":this.xzForm.outName,
        "region.idx":this.xzForm.indxNum,
        "region.pid":this.xzForm.xzPlace,
        "region.type":this.xzForm.placeType
      }).then(data=>{
        if(data.data[0]==0){
          this.$message({
            message: data.data[1],
            type: 'success'
          });
        }else{
          this.$message.error(data.data[1]);
        }
      })
    },
    del(){
      this.postRequest("/sch/data/region/del",{
        id:this.currentRow.id
      }).then(data=>{
        // console.log(data);
        if(data.data[0]==0){
          this.$message({
          message: data.data[1],
          type: 'success'
          })
        }else{
           this.$message.error(data.data[1]);
        }
      })
    },
    check(){
      // this.postRequest
    },
    rowChange(val){
      console.log(val);
      this.currentRow=val;
      if(this.modTitle=='修改'){
        this.xzForm.centerNum=val.official_code;
        this.xzForm.centerName=val.official_name;
        this.xzForm.inNum=val.code;
        this.xzForm.inName=val.name_in;
        this.xzForm.outName=val.name_out;
        this.xzForm.indxNum=val.idx;
        this.xzForm.xzPlace=val.pid;
        this.xzForm.placeType=val.type;
      }
    }
  },
  computed: {},
  components:{TableData},
  watch: {},
  mounted() {
    console.log("xzPlace");
    this.$emit("sendActive", this.activeTag);
    this.tableCreate();
    this.getXzList();
  }
};
</script>
<style scoped src="../../assets/css/service/xzPlace.css">
</style>